<template>
  <div id="app">
    <!-- 
      可以使用,但是不建议
      {{$store.state.num}}
    {{$store.getters.getNum}}
     -->
    {{getNum}}
    {{getTest}}
     名称：{{getName}}
    <button @click="add">添加数量</button>
    <button @click="addByNum">添加一定数量</button>
    <button @click="addByNumAsync">异步nutation添加一定数量</button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { mapGetters } from 'vuex'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  //开发必踩坑 开始
  created() {
    setTimeout(()=>{
      //在原有属性添加数量
      //this.$store.dispatch('addByNumAction',20);
      this.$store.dispatch('addProps','jack');
    },1000);
  },
  //开发必踩坑 结束
  //getters结合computed使用
  computed: {
    ...mapGetters([
      'getNum',
      'getTest',
      'getName',
      // ...
    ])
    // getNum(){
    //   return this.$store.getters.getNum;
    // }
  },
  methods: {
    add(){
      //不建议直接这么使用
      this.$store.commit('addNum');
    },
    addByNum(){
      //不建议直接这么使用
      this.$store.commit('addByNum',10);
    },
    addByNumAsync(){
      //不建议直接这么使用
      //this.$store.commit('addByNumAsync',20);
      //异步处理需要调用Action
      this.$store.dispatch('addByNumAction',20);
    }
  },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
